<!DOCTYPE html>
<html>
<head>
	<link href="../demoengine/demoengine.min.css" rel="stylesheet">
	<script src="../demoengine/demoengine.min.js" defer></script>
	<title>jQuery UI Dialog: Load Content via AJAX</title>
	<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/ui-darkness/jquery-ui.min.css" rel="stylesheet">
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
</head>
<body>
	<div id="dialog"></div>
	<ul>
		<li><a href="ajax-data-1.html" class="dialogify">Dialogify Page 1</a> (<a href="ajax-data-1.html">view raw content</a>)</li>
		<li><a href="ajax-data-2.html" class="dialogify">Dialogify Page 2</a> (<a href="ajax-data-2.html">view raw content</a>)</li>
	</ul>
	<script>
		/*
		 * jQuery UI Dialog: Load Content via AJAX
		 * http://salman-w.blogspot.com/2013/05/jquery-ui-dialog-examples.html
		 */
		$(function() {
			$("#dialog").dialog({
				autoOpen: false,
				modal: true,
				width: 600,
				height: 300,
				buttons: {
					"Dismiss": function() {
						$(this).dialog("close");
					}
				}
			});
			$(".dialogify").on("click", function(e) {
				e.preventDefault();
				$("#dialog").html("");
				$("#dialog").dialog("option", "title", "Loading...").dialog("open");
				$("#dialog").load(this.href, function() {
					$(this).dialog("option", "title", $(this).find("h1").text());
					$(this).find("h1").remove();
				});
			});
		});
	</script>
</body>
</html>
